<template>
	<view class="indexs">
		<view class="header header_lan" :style="'padding-top: ' + navH + 'px;'">
			<view class="header_height"
				:style=" 'height:' + gaodu + 'px;line-height:' +  gadu + 'px;top:' + gaodutops + 'px;' ">
				<view class="index_h_cont3">
					<view class="index_wenben_img" @tap="jumpzuo">
						<image :src="imgUrl + '/dzx_img22.png'" mode="widthFix"></image>
					</view>
					<view class="index_wenben baise">{{ words.order.title.value }}</view>
				</view>
			</view>
			<view class="coloe_title">s</view>
		</view>
		<view class="index_center" :style="'padding-top:' + (navH + 50) + 'px;padding-bottom: 130rpx;'">
			<view class="my_pinzhenglist_center">
				<view class="index_swiper">
					<!--Tab布局-->
					<view class="index_title">
						<block v-for="(item, index) in malllist" :key="index">
							<view :data-id="item.id" :data-type="item.type"
								:class="'mall_dis ' + (currentIndex == index ? 'mall_on' : '')" @tap="getcurrentid">
								<view class="mall_t1">{{ item.name }}</view>
							</view>
						</block>
						<view class="mys_xians_po" :style="'width:' + width + 'px;left:' + left + 'px;'">
							<view class="mys_xians"></view>
						</view>
					</view>
					<view class="cangkuyuan_baoguoliebiao_item2">
						<view
							:class=" type == 1 ? 'on cangkuyuan_baoguoliebiao_item2_t1' : 'cangkuyuan_baoguoliebiao_item2_t2' "
							@tap="qiehuan" data-id="1">
							{{ $t("page_my_order.jijiandingdan") }}
						</view>
						<view
							:class=" type == 2 ? 'on cangkuyuan_baoguoliebiao_item2_t1' : 'cangkuyuan_baoguoliebiao_item2_t1' "
							@tap="qiehuan" data-id="2">
							{{ $t("page_my_order.Delivery_order") }}
						</view>
					</view>
					<!--内容布局-->
					<view class="index_list">
						<swiper class="swiper paid_list_cont" @change="pagechange" :current="currentIndex"
							:style="'height:' + height + ';'">
							<block v-for="(item, index) in malllist" :key="index">
								<swiper-item>
									<view :class="'index_list_heji' + index">
										<view class="my_fanyongdingdan_list">
											<view class="my_fanyongdingdan_cont" v-for="(item, index) in list"
												:key="index">
												<view class="my_fanyongdingdan_cont_title">
													<view class="my_fanyongdingdan_cont_title_l">
														<image :src="imgUrl + '/dzx_img161.png'"></image>
														<text>{{ order_time }}{{ item["created_time"] }}</text>
													</view>
													<view class="my_fanyongdingdan_cont_title_r">
														{{
														  item["is_settled"] == 0
															? weijiesuan
															: yijiesuan
														}}
													</view>
												</view>
												<view class="my_fanyongdingdan_cont_list">
													<view class="my_fanyongdingdan_cont_cont">
														{{ shipping_country }}
														<text>{{ item["country"] }}</text>
													</view>
													<view class="my_fanyongdingdan_cont_cont">
														{{ sending_route }}
														<text>{{ item["line"]["name"] }}</text>
													</view>
													<view class="my_fanyongdingdan_cont_cont">
														{{ chargeable_weight }}
														<text>{{ item["cale_weight"] }}</text>
													</view>
													<view class="my_fanyongdingdan_cont_cont">
														{{ order_number }}
														<text>{{ item["order_sn"] }}</text>
													</view>
													<view class="my_fanyongdingdan_cont_cont">
														{{ order_amount }}
														<text>{{ price_mode.unit }}{{ item["real_payment"]}}{{ yuan }}</text>
													</view>
												</view>
												<view class="my_fanyongdingdan_cont_bottom">
													<image :src="imgUrl + '/dzx_img162.png'"></image>
													<view class="my_fanyongdingdan_cont_b1">
														{{ yujishousyi }}
														<text>{{ price_mode.unit }}{{ item["bonus"] }}</text>
													</view>
												</view>
											</view>
										</view>
									</view>
								</swiper-item>
							</block>
						</swiper>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// pages/shouye/shouye_zkc/shouye_zkc.js
	const app = getApp();
	let request = require("../../../utils/require");
	export default {
		data() {
			const weijiesuan = this.$t("page_my_order.weijiesuan")
			const order_time = this.$t("page_my_order.Order_time")
			const yijiesuan = this.$t("page_my_order.yijiesuan")
			const shipping_country = this.$t("page_my_order.shipping_country")
			const sending_route = this.$t("page_my_order.Sending_route")
			const chargeable_weight = this.$t("page_my_order.chargeable_weight")
			const order_number = this.$t("page_my_order.order_number")
			const order_amount = this.$t("page_my_order.Order_amount")
			const yujishousyi = this.$t("page_my_order.yujishousyi")
			const yuan = this.$t("page_my_order.yuan")
			return {
				navH: app.globalData.navHeight,
				gaodu: app.globalData.height,
				gaodutops: app.globalData.top,
				imgUrl: app.globalData.imgUrl,
				price_mode: uni.getStorageSync("price_mode"),
				malllist: [{
						id: 0,
						name: "全部订单",
						index: 0,
					},
					{
						id: 1,
						name: "已结算",
						index: 1,
					},
					{
						id: 2,
						name: "未结算",
						index: 2,
					},
				],
				height: 0,
				heights: 0,
				currentIndex: 0,
				left: 16,
				false: false,
				width: 0,
				list: [],
				words: [],
				type: 1,
				weijiesuan,
				order_time,
				yijiesuan,
				shipping_country,
				sending_route,
				chargeable_weight,
				order_number,
				order_amount,
				yujishousyi,
				yuan
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad() {
			var that = this;
			that.changeline();
			that.getDealerList();
		},
		onShow() {
			var that = this;
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			qiehuan(e) {
				this.list= []
				this.type= e.currentTarget.dataset.id
				this.getDealerList();
			},
			//swiper切换时会调用
			pagechange: function(e) {
				var that = this;
				console.log(e, 88888);
				that.list= []
				that.currentIndex= e.detail.current
				that.changeline(e);
				that.getDealerList(e);
			},

			//swiper单击事件
			getcurrentid(e) {
				this.list= []
				this.currentIndex= e.currentTarget.dataset.id
				this.getDealerList();
			},

			//下标线左右滑动效果
			changeline: function(e) {
				const query = uni.createSelectorQuery();
				var that = this;
				query.select(".mall_on").boundingClientRect();
				query.exec(function(res) {
					console.log(res, "????");
					if (res[0] != null) {
						that.left= res[0].left
						that.width= res[0].width
					} else {
						that.left= 0
					}
				});
			},
			getDealerList() {
				var that = this;
				var data = {
					token: uni.getStorageSync("token"),
					settled: this.currentIndex,
					type: that.type,
				};
				request
					.get(
						`index.php?s=/api/shop.order/lists&wxapp_id=` +
						uni.getStorageSync("web_id"),
						data
					)
					.then((res) => {
						if (res.data.code == 1) {
							this.list= res.data.data.list.data
							this.words= res.data.data.words
							console.log(that.words, 6666);
							setTimeout(() => {
								that.swiperhegiht(that.currentIndex);
							}, 300);
						}
					});
			},
			//swiper选项卡的高度
			swiperhegiht(es) {
				var that = this;
				var query = uni.createSelectorQuery();
				console.log(es, 9999);
				query.selectAll(".index_list_heji" + es).boundingClientRect();
				query.exec((res) => {
					var listHeight = res[0][0].height;
					that.height= listHeight + "px"
					that.heights= res[0]
					console.log(that.height, 55555);
				});
			},
			jumpzuo() {
				uni.navigateBack();
			},
		},
	};
</script>
<style>
	@import "./my_order.css";
</style>